<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>我们的故事</title>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Compoent/3d/css/demo.css" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Compoent/3d/css/slicebox.css" />
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Compoent/3d/css/custom.css" />
	<script type="text/javascript" src="__PUBLIC__/Compoent/3d/js/modernizr.custom.46884.js"></script>
	<style>
		 span{

			color:#58AEF9;
			font-size: 16px;

		}


			#code{

			margin-left: 400px;
			height: 1000px;

		}
	</style>
</head>
<body>
<!-- 无控制器 -->
	<div id="player">
	<audio autoplay="autoplay">
  		<source src="__PUBLIC__/admin/story/song1.mp3" type="audio/ogg" />
	</audio>
	</div>

<!-- 有控制器 -->
<!-- 	<div id="player">
	<audio controls="controls" autoplay="autoplay">
  		<source src="__PUBLIC__/admin/story/song1.mp3" type="audio/ogg" />
	</audio>
	</div> -->


	<div class="container">



			<div class="wrapper">

				<ul id="sb-slider" class="sb-slider">
					<li>
						<a href="#" target="_blank"><img src="__PUBLIC__/Compoent/3d/images/1.jpg" alt="image1"/></a>
						<!-- <div class="sb-description">
							<h3></h3>
						</div> -->
					</li>
					<li>
						<a href="#" target="_blank"><img src="__PUBLIC__/Compoent/3d/images/2.jpg" alt="image2"/></a>
						<!-- <div class="sb-description">
							<h3></h3>
						</div> -->
					</li>
					<li>
						<a href="#" target="_blank"><img src="__PUBLIC__/Compoent/3d/images//3.jpg" alt="image1"/></a>
					<!-- 	<div class="sb-description">
							<h3></h3>
						</div> -->
					</li>
					<li>
						<a href="#" target="_blank"><img src="__PUBLIC__/Compoent/3d/images//4.jpg" alt="image1"/></a>
					<!-- 	<div class="sb-description">
							<h3></h3>
						</div> -->
					</li>
					<li>
						<a href="#" target="_blank"><img src="__PUBLIC__/Compoent/3d/images//5.jpg" alt="image1"/></a>
					<!-- 	<div class="sb-description">
							<h3></h3>
						</div> -->
					</li>
					<li>
						<a href="#" target="_blank"><img src="__PUBLIC__/Compoent/3d/images/6.jpg" alt="image1"/></a>
						<!-- <div class="sb-description">
							<h3></h3>
						</div> -->
					</li>
					<li>
						<a href="#" target="_blank"><img src="__PUBLIC__/Compoent/3d/images//7.jpg" alt="image1"/></a>
			<!-- 			<div class="sb-description">
							<h3></h3>
						</div> -->
					</li>
				</ul>

				<div id="shadow" class="shadow"></div>

				<div id="nav-arrows" class="nav-arrows">
					<a href="#"></a>
					<a href="#"></a>
				</div>

				<div id="nav-options" class="nav-options">
					<span id="navPlay">Play</span>
					<span id="navPause">Pause</span>
				</div>

			</div><!-- /wrapper -->
	
				<div id="code">
	
						<span>星光</span><br>
			  <span>即使像太阳一样耀眼，也会有黑夜降临</span>
					<span>星星终究是星星，只有满天星空才能驱散黑暗</span>
					<span>多少个夜晚，在教室孤独奋斗</span><br>
					<span>截止今天，是我在教室度过的12个夜晚</span><br>
					<span>倦意怎比得上项目进度的催促？</span><br>
					<span>在黎明升起的时候睡下，</span><br>
					<span>苦和笑，泪和甜，</span><br>
					<span>这一切都比不上项目完成的瞬间</span><br>
					<span>那刹那的幸福，所有的苦都回味成甘甜</span><br>
					<span>从来没有如此全身心的投入过，</span><br>
					<span>这也许是这辈子干过最认真的事，</span><br>
					<span>问心无愧，竭尽全力</span><br>
					<span>终于，黎明就在眼前，</span><br>
					<span>感谢艰难困苦，</span><br>
					<span>在那最难熬的日子里，</span><br>
					<span>人生的冷暖自知</span><br>
					<span>当初怀揣着梦想，</span><br>
					<span>被一次次打击</span><br>
					<span>一路走来，多少风雨泪水？</span><br>
					<span>是啊，当初的理想实现了吗？</span><br>
					<span>事到如今只好祭奠吗？</span><br>
					<span>不，我一直记得我的理想</span><br>
					<span>抛却依赖，</span><br>
					<span>独立前行</span><br>
					<span>没有人能够依靠，</span><br>
					<span>天行健，</span><br>
					<span>君子以自强不息。</span><br>
					<span>地势坤，</span><br>
					<span>君子以厚德载物。</span><br>
					<span>前路茫茫</span><br>
					<span>鼓起勇气，竭尽全力</span><br>
			
	</div>



		</div>
		<script <script src="__PUBLIC__/Compoent/3d/js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="__PUBLIC__/Compoent/3d/js/jquery.slicebox.js"></script>
		<script type="text/javascript">
			$(function() {
				
				var Page = (function() {

					var $navArrows = $( '#nav-arrows' ).hide(),
						$navOptions = $( '#nav-options' ).hide(),
						$shadow = $( '#shadow' ).hide(),
						slicebox = $( '#sb-slider' ).slicebox( {
							onReady : function() {

								$navArrows.show();
								$navOptions.show();
								$shadow.show();

							},
							orientation : 'h',
							cuboidsCount : 3
						} ),
						
						init = function() {

							initEvents();
							
						},
						initEvents = function() {

							// add navigation events
							$navArrows.children( ':first' ).on( 'click', function() {

								slicebox.next();
								return false;

							} );

							$navArrows.children( ':last' ).on( 'click', function() {
								
								slicebox.previous();
								return false;

							} );

							$( '#navPlay' ).on( 'click', function() {
								
								slicebox.play();
								return false;

							} );

							$( '#navPause' ).on( 'click', function() {
								
								slicebox.pause();
								return false;

							} );

						};

						return { init : init };

				})();

				Page.init();




		(function($) {
		$.fn.typewriter = function() {
			this.each(function() {
				var $ele = $(this), str = $ele.html(), progress = 0;
				$ele.html('');
				var timer = setInterval(function() {
					var current = str.substr(progress, 1);
					if (current == '<') {
						progress = str.indexOf('>', progress) + 1;
					} else {
						progress++;
					}
					$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
					if (progress >= str.length) {
						clearInterval(timer);
					}
				}, 75);
			});
			return this;
		};
	})(jQuery);

			

			$("#code").typewriter();

			});
		</script>
	
</body>
</html>